import * as React from 'react';
import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
import { Label, TextField } from 'office-ui-fabric-react';

interface ISidePanelProps {
  xAxis?: any[]
  series?: any[]
  onChange?: Function
}

export class SidePanel extends React.Component<
  ISidePanelProps,
  {
    showPanel: boolean;
    newSeries?: any[]; // 把从props接收的值 重新赋值到state里newSeries 编辑series后回传出组件 render新图表
  }
  > {
  constructor(props: ISidePanelProps) {
    super(props);
    this.state = {
      showPanel: false,
      newSeries: props.series
    };
  }

  private handleSeriesChange = (value, parentIndex, index) => {

    let { newSeries } = this.state
    newSeries[parentIndex].data[index] = parseInt(value)

    this.setState({
      newSeries
    });
  };

  private handleSave = () => {
    let { newSeries } = this.state
    this.props.onChange(newSeries)
    this._onClosePanel()
  };

  public render(): JSX.Element {
    const { xAxis, series } = this.props
    const { newSeries } = this.state

    // 把图表数据展示成易于编辑展示的结构
    const options = xAxis.map(
      (item, index) => {
        return {
          label: item,
          series: newSeries.map(
            (innerItem, innerIndex) => {
              return {
                name: innerItem.name,
                value: innerItem.data[index]
              }
            }
          ),
        }
      }
    )

    return (
      <div>
        <DefaultButton className="pull-left" onClick={this._onShowPanel} text="编辑" />
        <Panel
          isOpen={this.state.showPanel}
          type={PanelType.smallFixedFar}
          onDismiss={this._onClosePanel}
          isLightDismiss={true}
          onLightDismissClick={this._onClosePanel}
          isFooterAtBottom={true}
          // headerText="修改图表数据"
          closeButtonAriaLabel="关闭"
          onRenderFooterContent={this._onRenderFooterContent}
        >
          <div className="ms-Grid" dir="ltr">
            {options.map(
              (item, index) => {
                return (
                  <div key={index} className="ms-Grid-row option-item">
                    <div className="ms-Grid-col ms-sm6">
                      <Label>{item.label}</Label>
                    </div>
                    <div className="ms-Grid-col ms-sm6">
                      {
                        item.series.map(
                          (innerItem, innerIndex) => {

                            return (
                              <TextField key={innerIndex}
                                name={innerItem.name}
                                type="tel"
                                placeholder=""
                                value={innerItem.value}
                                onChange={(e, value) => this.handleSeriesChange(value, innerIndex, index)}
                              />
                            )
                          }
                        )
                      }
                    </div>
                  </div>
                )
              }
            )}

          </div>
        </Panel>
      </div>
    );
  }

  private _onClosePanel = () => {
    this.setState({ showPanel: false });
  };

  private _onRenderFooterContent = (): JSX.Element => {
    return (
      <div>
        <PrimaryButton onClick={this.handleSave} style={{ marginRight: '8px' }}>
          保存
        </PrimaryButton>
        <DefaultButton onClick={this._onClosePanel}>关闭</DefaultButton>
      </div>
    );
  };

  private _onShowPanel = () => {
    this.setState({ showPanel: true });
  };
}

export default SidePanel
